<script setup>
import { ref } from 'vue';
import Form from './06-defineExpose-Form.vue';

// 1. 提供一个ref
const formRef = ref(null);
// 2. 使用组件组件和方法
const onClick = () => {
  // [ count1
  console.log('formRef.value.count1-before', formRef.value.count1);
  // 这里 count1 接收到的是 ref.value 的值，所以已经原来的 ref 没有关联了，所以会丢失响应式
  formRef.value.count1++;
  console.log('formRef.value.count1-after', formRef.value.count1);
  // ] count1

  // [ count2
  console.log('formRef.value.count2-before', formRef.value.count2);
  // 这里 count2 接收到的是个 ref，所以响应式还是没丢的，并且会自动解包，所以不需要再 .value++ 了，可以直接 ++
  formRef.value.count2++;
  console.log('formRef.value.count2-after', formRef.value.count2);
  // ] count2

  formRef.value.validate();

  // 这里接收到的 user 由于本身就是一个 reactive，所以响应式还是没丢的
  formRef.value.user.name = '张三';
};
</script>

<template>
  <Form ref="formRef"></Form>

  <h2>formRef.value.count1: {{ formRef?.count1 }}</h2>
  <h2>formRef.value.count2: {{ formRef?.count2 }}</h2>

  <button @click="onClick">修改 Form 组件中的 count 数据</button>
</template>
